<!-- 横版大图，商品卡片 -->
<template>
  <view style="padding: 10px;border-bottom: 1px solid #F3F3F3;width: 100%;" :data-id="detail.store_shop_id" @click="click">
    <view class="topone"style="display: flex;">
      <view style="position: relative;">
        <image :src="detail.shop_image" style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
        <!-- <view style=" font-size: 12px;"> -->
<!--        <view style="position: absolute;color: #FFFFFF; bottom: 10px; left: 5px;color: white;text-align: center; line-height: 18px;font-size: 12px;width: 68rpx;height: 36rpx;height: 18px;background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);border-radius: 8px 0px 8px 0px;opacity: 1;">-->
<!--          {{detail.discount}}-->
<!--        </view>-->
      </view>
      <view>
        <view style="margin-left: 10px;    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;">
          <view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;">{{detail.shop_name}}</view>
          <view style="display: flex;flex-direction: row;">
            <view v-for="(tags,tagindex) in detail.shop_tags" style="background-color: #FFF0E4;padding: 6rpx 10rpx;margin-right: 10rpx;border-radius: 2px 2px 2px 2px;font-size: 20rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #FE811C;line-height: 30rpx;">
              {{tags}}</view>
          </view>
          <view style="font-size: 20rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">{{detail.shop_text}}</view>
          <view style="left: -9rpx;position: relative;">

            <u-rate :value="detail.shop_score"  :disabled="true" activeColor="#FE811C"></u-rate>
          </view>
          <view v-if="item.quan_text" style="display: flex;margin-top: 1px;margin: 0rpx 0rpx;">
            <!-- <image src="https://duomi.bigchun.com/images/shangbang/quan.png" style="width: 16px;height: 16.5px;"></image>
            <view class="lable" >{{item.quan_text}}</view> -->
            <view v-if="detail.quan_text!=''">
              <image style="width: 32rpx;height: 32rpx;" src="https://duomi.bigchun.com/images/shangbang/quan.png"></image>
            </view>
            <view v-if="detail.quan_text!=''" class="lable">
              {{detail.quan_text}}</view>
          </view>
        </view>

      </view>
    </view>
    <view class="taocan" v-if="detail.store_goods.length>0">
      <view class="taocanone" v-for="(items,index) in  detail.store_goods" :key="index" :class="index==0?'margin_top16':''">
        <view style="display: flex;align-items: center">
          <view class="hui">惠</view>
          <view class="huiyuanjia">{{'￥'+items.vip_price}}</view>
          <view class="yuanjia">{{'￥'+items.price}}</view>
        </view>
        <view class="taocanname" style="color:#666666;">
         {{'【'+items.title+'】' + ' '+ items.subtitle}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 *shoproGoodsCard - 商家列表卡片

 */
export default {
  components: {},
  data() {
    return {
    };
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  mounted() {},
  methods: {
    //点击商品
    click() {
      this.$emit('click');
    },
  }
};
</script>

<style lang="scss">
// 大商品卡片
.big-goods {
  width: 710rpx;
  min-height: 260rpx;
  background: #ffffff;
  border-radius: 20rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .goods-img {
    width: 260rpx;
    height: 260rpx;
    background-color: #f5f5f5;
    border-radius: 6rpx;
  }
  .card-right {
    width: 430rpx;
    height: 220rpx;
  }
  .goods-title {
    font-size: 26rpx;
    font-weight: 600;
    width: 400rpx;
    color: #000000;
    padding-top: 6rpx;

    .title-tag {
      transform: scale(0.9);
      position: relative;
      top: -6rpx;
    }
  }
  .subtitle-text {
    font-size: 24rpx;
    width: 400rpx;
    font-weight: 500;
    color: #666666;
  }
  .tag-box {
    border: 1rpx solid #ff0000;
    display: inline-block;
    font-size: 24rpx;
    line-height: 30rpx;
    padding: 0 10rpx;
    color: #ff0000;
    border-radius: 8rpx;
  }

  // 购物车
  .cart-box {
    .cart-btn {
      width: 54rpx;
      height: 54rpx;
      border-radius: 50%;
      padding: 0;
      background: linear-gradient(90deg, #e9b461, #eecc89);
    }
    .buy-btn {
      width: 120rpx;
      line-height: 50rpx;
      background: linear-gradient(90deg, #e9b461, #eecc89);
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }

  // 价格
  .price {
    color: #ff0000;
    font-weight: 600;
    &::before {
      content: '￥';
      font-size: 24rpx;
    }
  }
  .origin-price {
    color: #c4c4c4;
    font-size: 24rpx;
    text-decoration: line-through;
    &::before {
      content: '￥';
      font-size: 20rpx;
    }
  }
}
.margin_top16{
  margin-top: 16rpx;
}
.taocan{
  font-size: 24rpx;
  .taocanone{
    width: 85vw;
    display: flex;
    margin-bottom: 10rpx;
    align-items: center;
    overflow: hidden;  //超出文本隐藏
    white-space: nowrap;  //不换行，只显示一行
    text-overflow: ellipsis;  //超出部分省略号显示
    .hui{
      width: 30rpx;
      height: 30rpx;
      background: linear-gradient(180deg, #F18103 0%, #FB550B 100%);
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      opacity: 1;
      font-size: 22rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .huiyuanjia{
      color: #FE7F1A;
      font-size: 26rpx;
    }
    .yuanjia{
      color: #999999;
      text-decoration: line-through;
      padding-left: 12rpx;
    }
    .taocanname{
      max-width:240px;
      width: 200px;  //宽度
      overflow: hidden;  //超出文本隐藏
      white-space: nowrap;  //不换行，只显示一行
      text-overflow: ellipsis;  //超出部分省略号显示
      margin-left: 6rpx;
    }
  }
}
</style>
